<template>
    <div id="app">
        <div class="fixed-header">
            <biyao-search></biyao-search>
            <tmall-fast-nav :buttons="buttons"></tmall-fast-nav>
            <biyao-category :list="category"></biyao-category>
        </div>
        <div class="mui-content">
            <biyao-sub-category v-if="subCategory.length" :list="subCategory"></biyao-sub-category>
            <tmall-product-item :products="products" @selectProduct="openSelectPanel" :isbiyao=true></tmall-product-item>
        </div>
    </div>
</template>
<script>
import _ from 'lodash';
import { ajax, locationParams, apiDomain } from 'assets/js/Lib';
import BiyaoSearch from 'components/BiyaoSearch';
import BiyaoCategory from 'components/BiyaoCategory';
import BiyaoSubCategory from 'components/BiyaoSubCategory';
import TmallFastNav from 'components/TmallFastNav';
import TmallProductItem from 'components/TmallProductItem';
let activeCategoryID = locationParams('category');
let activeSubCategoryID = locationParams('sub-category');

export default {
    data() {
        return {
            buttons: [],
            category: [],
            subCategory: [],
            products: []
        };
    },
    computed: {
        webApiDomain: function () {
            return apiDomain;
        }
    },
    components: {
        TmallFastNav, TmallProductItem, BiyaoCategory, BiyaoSubCategory, BiyaoSearch
    },
    beforeCreate() { },
    beforeMount() { },
    mounted() {

        let cacheMenu = JSON.parse(localStorage.getItem('$scoreMenu') || '[]')
        let cacheButtons = JSON.parse(localStorage.getItem('$scoreButtons') || '[]')

        if (cacheMenu.length > 0) {
            let activeCategory = _.find(cacheMenu, item => item.id == activeCategoryID);
            this.category = cacheMenu;
            this.subCategory = activeCategory && activeCategory.sub || [];
        } else {
            ajax({
                url: '/api/menu/index',
                type: 'GET',
                data: { is_score: 1 },
                success: res => {
                    let activeCategory = _.find(res, item => item.id == activeCategoryID);
                    this.category = res;
                    this.subCategory = activeCategory && activeCategory.sub || [];
                }
            });
        }

        if (cacheButtons.length > 0) {
            this.buttons = cacheButtons
        } else {
            ajax({
                url: '/api/index/slgads',
                type: 'GET',
                success: data => {
                    this.buttons = data.fastIcon.reverse();
                }
            });
        }

        ajax({
            // TODO 替换成 activeCategoryID, activeSubCategoryID
            url: '/api/product/index',
            type: 'GET',
            data: { menu_id: activeSubCategoryID, is_score: 1 },
            success: res => {
                this.products = res.product;
            }
        });
    },
    methods: {
        openSelectPanel: function () {

        }
    }
};
</script>
<style lang="less">
.fixed-header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 5;
    background: #fff;
    box-shadow: 1px 1px 5px rgba(7, 0, 2, .2);
}

.fast-nav {
    padding-bottom: .3rem;
    border-bottom: 1px solid rgba(7, 0, 2, 0.1);
}

.mui-content {
    padding-top: 4.9rem;
}

.products {
    .item {
        background: transparent;
        .recommend-item-class {
            width: 4.85rem;
            height: inherit;
            margin: 1%;
            background: white;
            text-align: center;
        }
        .buy-line {
            padding: .2266666667rem .3333333333rem;
        }
        .remark-border,
        .shop-car {
            display: none;
        }
        .price {
            color: #f33 !important;
            float: none !important;
        }
        .title {
            font-size: .32rem !important;
        }
    }
}
</style>
